<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>


<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${applicationScope.KEY_SITE_NAME}</title>
<link href="resources/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="resources/css/intstyle.css" rel="stylesheet" type="text/css" />
<link href="resources/css/combobox.css" rel="stylesheet" type="text/css" />
<link href="resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="resources/scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-ui.custom.js"></script>
<script type="text/javascript" src="resources/scripts/jquery.blockUI.js"></script>
<script type="text/javascript" src="resources/scripts/common.js"></script>
<script type="text/javascript" src="resources/scripts/jquery.validate.js"></script>
<script type="text/javascript" src="resources/scripts/combobox.js"></script>
<script type="text/javascript" src="resources/scripts/jquery.dataTables.js"></script>

<script type="text/javascript">
<!--
var tableObj;
	$(document)
			.ready(
					function() {

						
						renderButtons();
						changeSideMenuBackColor("sideMenuGameServer");
						$("#selectGame").combobox({
							select:function(){
								postGameServerAction('admin/game/server/get');
						     }
							
						});	
						
						tableObj = getDataTable("serverTable", dataTableLabels, 20);
						
						$("#form").validate({
					        rules: {
					   gameId :{
						   required:true
					   },
					   name: {
						   required:true,
						   maxlength:40
					   },
					   keywords: {
						   required:true,
						   maxlength:40
					   }
					  },
					   messages: {
					   gameId:{
						  required:"<spring:message code="msg.input.field.required"/>",
					   },
					   name: {
						  required:"<spring:message code="msg.input.field.required"/>",
						  maxlength:jQuery.format("<spring:message code="msg.input.field.maxlength"/>")
					   },
					   keywords: {
						   required:"<spring:message code="msg.input.field.required"/>",
						   maxlength:jQuery.format("<spring:message code="msg.input.field.maxlength"/>")
					   }
					  },
					    
					  submitHandler:function(form){
						  saveGameServer();
					  }
					 
					 });
						
						
						$("#updateform").validate({
					        rules: {

							   name: {
								   required:true,
								   maxlength:40
							   },
							   keywords: {
								   required:true,
								   maxlength:40
							   }
					        },
					      	messages: {
							   
							   name: {
								  required:"<spring:message code="msg.input.field.required"/>",
								  maxlength:jQuery.format("<spring:message code="msg.input.field.maxlength"/>")
							   },
							   keywords: {
								   required:"<spring:message code="msg.input.field.required"/>",
								   maxlength:jQuery.format("<spring:message code="msg.input.field.maxlength"/>")
							   }
					  		},
					    
					  	   submitHandler:function(form){
					  		 saveUpdateGameServer();
					       }
					       
					       /* errorPlacement: function(error, element) {  
					    	     if (element.attr("name") == "name")  
					    	         error.appendTo("#labelname");  
					    	     else  
					    	    	 error.appendTo("#labelkeywords");  
					       }
					  */
					 	});
						
						
						$("#dialog-form").dialog({
						      autoOpen: false,
						      height: 250,
						      width: 600,
						      modal: true,						      
						      buttons: [
						    			{
						    				text: "<spring:message code='Label.dialog.ok'/>",
						    				click: function() {
						    					$("#updateform").submit();
						    				}
						    			},
						    			
						    			{
						    				text: "<spring:message code='Label.dialog.cancel'/>",
						    				click: function() {
						    					$( this ).dialog( "close" );
						    				}
						    			}
						    		],					    		
						      
						      close: function() {
						        
						      }
						});

	});
	
	
function postGameServerAction(action) {		
	$.post(action, $("#form").serialize(), function(obj,
			status) {
		tableObj.fnDestroy();
		callBackfuc(obj);
		tableObj=getDataTable("serverTable", dataTableLabels, 20);
		renderButtons();
	});
		
}

function callBackfuc(obj) {		
	
	var tbody = $("#serverTable>tbody");
	tbody.children().remove();
	jQuery.each(obj, function(i,item){
		str = "<tr id='tr" + i + "'><td>" + item.name + "</td>";
		str = str + "<td>" + item.keywords + "</td>";
		
		str = str + "<td>";
		if (-1 == item.status) {
			str = str + "<spring:message code="Label.common.status.delete"></spring:message>";
		} else if (0 == item.status) {
			str = str + "<spring:message code="Label.common.status.inactive"></spring:message>";
		} else if (1 == item.status) {
			str = str + "<spring:message code="Label.common.status.active"></spring:message>";
		} else {
			str = str + item.status;
		}
		str = str + "</td>";
		
		str = str + "<td>";
		str = str + "<div style='width:210px;'>";
		str = str + "<button class='tableButton' onclick=postGameServerAction(\'admin/game/server/status/update/" + item.gameId + "/" + item.serverId + "/" + "1\') class='view'><spring:message code='Label.common.status.active'/></button>" ;
		str = str + "<button class='tableButton' onclick=postGameServerAction(\'admin/game/server/status/update/" + item.gameId + "/" + item.serverId + "/" + "0\') class='edit'><spring:message code='Label.common.status.inactive'/></button>" ;
		str = str + "<button class='tableButton' onclick=updateGameServer(\'admin/game/server/update/" + item.gameId + "/" + item.serverId + "\',\'tr" + i + "\') class='edit'><spring:message code='Label.game.edit'/></button>" ;
		str = str + "<button class='tableButton' onclick=confirmDeleteAction(\'admin/game/server/delete/" + item.gameId + "/" + item.serverId + "\') class='delete'><spring:message code='Label.common.status.delete'/></button></td></tr>" ;
		str = str + "</div>";
		tbody.append(str);
    });
}



var updateAction = "";
var currentRowId = "";
function updateGameServer(action, trId) {
	
	$("#newname").val($("tr[id="+ trId +"]").children().eq(0).text());
	$("#newkeywords").val($("tr[id="+ trId +"]").children().eq(1).text());
	updateAction = action;
	currentRowId = trId;
	$("#dialog-form").dialog("open");
}

function saveUpdateGameServer() {
	$.post(updateAction,
 		   $("#updateform").serialize(),
 		   function(obj,status) {
 		      $("tr[id="+ currentRowId +"]").children().eq(0).html($("#newname").val());
 		      $("tr[id="+ currentRowId +"]").children().eq(1).html($("#newkeywords").val());
		     });
 	$("#dialog-form").dialog( "close" );
}

function confirmDeleteAction(action) {
	showConfirmDialog("<spring:message code='msg.dialog.confirm.delete'/>", function(result){
		if (result == true) {
			postGameServerAction(action);
		} else {
			return;
		}		
	});
}

function saveGameServer() {	
	getBlockUI();
	postGameServerAction("admin/game/server/save");
	$('#name').val("");
	$('#keywords').val("");
	$.unblockUI();
}

//-->
</script>

<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* 此 1px 负边距可以放置在此布局中的任何列中，且具有相同的校正效果。 */
ul.nav a { zoom: 1; }  /* 缩放属性将为 IE 提供其需要的 hasLayout 触发器，用于校正链接之间的额外空白 */
</style>
<![endif]-->
</head>

<body>

	<div class="container">
		<%@include file="../../header.jsp"%>
		<%@include file="../sidebar.jsp"%>
		<div id="contentBoxDiv" class="content">
			<div class="subnav">
				<spring:message code="Label.menu.headnav.goods" />
				&gt;&gt;
				<spring:message code="Label.menu.game.main" />
				&gt;&gt;
				<spring:message code="Label.menu.game.addServer" />
			</div>
			<%@include file="../../errorMessagePanel.jsp"%>
			<div class="box">
				<h2>
						<spring:message code="Label.menu.game.addServer" />
				</h2>

				<div class="box" style="border: none;">

					<form id="form" name="form" method="post">

						<fieldset>
							<div class="formfield">

								<div class="formLabel">
									<label for="selectGame"><spring:message	code="Label.server.game.name" /></label>
								</div>
								<div class="forminput">
									<select id="selectGame" style="width:368px;" name="gameId">
										<option value=""></option>
										<c:if test="${not empty games}">
											<c:forEach items="${games}" var="game">
												<option value="${game.gameId}">${game.name}</option>
											</c:forEach>
										</c:if>
									</select>
								</div>

							</div>

							<div class="formfield">

								<div class="formLabel">
									<label for="name"><spring:message code="Label.server.server.name"/></label>
								</div>
								<div class="forminput">
									<input type="text" id="name" name="name" class="text ui-widget-content ui-corner-all" />
								</div>

							</div>

							<div class="formfield">

								<div class="formLabel">
									<label for="keywords"><spring:message code="Label.server.server.keywords"/><spring:message code="Label.game.keywords.notice"/></label>
								</div>
								<div class="forminput">
									<input type="text" id="keywords" name="keywords" class="text ui-widget-content ui-corner-all" />
								</div>

							</div>

							<div class="forminput">
							
								<button type="submit" id="submitbtn">
									<spring:message code='Label.common.addserver' />
								</button>
								<button type="reset" id="reset">
									<spring:message code='Label.common.reset' />
								</button>
							</div>

						</fieldset>
					</form>
				
				<div class="box" style="border: none;">
					<table id="serverTable" width="100%">
						<thead>
							<tr>
								<th><spring:message code="Label.server.server.name"/></th>
								<th><spring:message code="Label.server.server.keywords"/></th>
								<th><spring:message code="Label.server.server.status"/></th>
								<th class="selected last"><spring:message code="Label.common.action"/></th>
							</tr>
						</thead>
						<tbody>					
						</tbody>
						<tfoot>
							<tr>
								<th><spring:message code="Label.server.server.name"/></th>
								<th><spring:message code="Label.server.server.keywords"/></th>
								<th><spring:message code="Label.server.server.status"/></th>
								<th class="selected last"><spring:message code="Label.common.action"/></th>
							</tr>
						</tfoot>
					</table>

				</div>
				
				
				
				</div>
			</div>

			<div id="dialog-form" title="<spring:message code="Label.server.update.title"/>">
				<form id="updateform" method="post">
					<fieldset>
						<div class="formfield">
							<div class="formLabel">
								<label id="labelname" for="newname"><spring:message
										code="Label.server.server.name" /></label>
							</div>
							<div class="forminput">
								<input type="text" name="name" id="newname"
									class="text ui-widget-content ui-corner-all" />
							</div>
						</div>
						<div class="formfield">
							<div class="formLabel">
								<label id="labelkeywords" for="newkeywords"><spring:message
										code="Label.server.server.keywords" /></label>
							</div>
							<div class="forminput">
								<input type="text" name="keywords" id="newkeywords" value=""
									class="text ui-widget-content ui-corner-all" />
							</div>
						</div>
					</fieldset>
				</form>
			</div>
			<!-- end .content -->
		</div>
		<div class="clearfloat" />
		<%@include file="../../footer.jsp"%>
		<!-- end .container -->
	</div>
</body>
</html>